﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>JS Console - Example</title>
	<link href="styles/js-console.css" rel="stylesheet" />
	<style>
		#number {
			border: 1px solid black;
			padding: 5px 15px;
			background-color: black;
			color: white;
			font-family: Consolas;
			margin-bottom: 5px;
		}

		a {
			color: black;
			border: 1px solid black;
			padding: 5px 15px;
			text-decoration: none;
			display: inline-block;
			margin: 15px 0;
		}

			a:hover {
				text-decoration: underline;
			}
	</style>
</head>
<body>
	<label for="tb-day">Text: </label>
	<input type="text" id="tb-day" />
	<br />
	<a href="#" onclick="onDayButtonClick()">Check the day</a>
	<div id="console">
	</div>
	<script src="scripts/js-console.js">	  
	</script>
	<script>
		function onDayButtonClick() {
			var dayIndex = jsConsole.readInteger("#tb-day");

			var day;
			switch (dayIndex) {
				case 1: day = "Monday"; break;
				case 2: day = "Tuesday"; break;
				case 3: day = "Wednesday"; break;
				case 4: day = "Thursday"; break;
				case 5: day = "Friday"; break;
				case 6: day = "Saturday"; break;
				case 7: day = "Sunday"; break;
				default:
					day = "Invalid day"; break;
			}
			jsConsole.writeLine(day);
		}
	</script>
</body>
</html>
